<template>
  <div style="display: inline-block;margin-left: 12px">
    <el-button icon="el-icon-plus" type="primary" size="small" @click="addRole">新增角色</el-button>
    <el-drawer
        title="新增角色"
        size="450px"
        :destroy-on-close="false"
        :visible.sync="dialogVisible">
      <roleForm ref="roleForm"></roleForm>
      <div class="btnBox flex-center">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-drawer>
<!--    <el-dialog-->
<!--        title="新增角色"-->
<!--        :visible.sync="dialogVisible"-->
<!--        width="500px">-->
<!--      <roleForm ref="roleForm"></roleForm>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="submit">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import roleForm from "@/views/systemManage/role/module/roleForm";
export default {
  name: "addRoleBtn",
  components:{
    roleForm
  },
  methods:{
    addRole(){
      this.dialogVisible = true
    },
    submit() {
      this.$refs.roleForm.validate().then((res) => {
        let params = {
          icon: this.$refs.roleForm.form.icon,
          name: this.$refs.roleForm.form.name,
          parentId: this.$refs.roleForm.form.parentId,
          roleExtent: this.$refs.roleForm.form.roleExtent,
        };
        this.$api.addRoles(params).then((res) => {
          this.$message.success("新增成功");
          this.dialogVisible = false;
          this.$emit("after-op");
        });
      });
    },
  },
  data(){
    return {
      dialogVisible:false
    }
  },
}
</script>

<style scoped>

</style>